<script setup>
import { ref, onMounted, watch, computed } from 'vue'
import api from '@/utils/api'
import Toast from '@/components/Toast.vue'
import { showToast } from '@/utils/toast'
import * as XLSX from 'xlsx'

// 账单数据
const bills = ref([]) // 存储账单列表数据
const loading = ref(false) // 加载状态标识
const showAddModal = ref(false) // 控制添加账单弹窗显示
const isEditing = ref(false) // 标识当前是否为编辑模式

onMounted(() => {
  fetchBills()
})

// 应用筛选条件并重新获取账单数据
const applyFilter = () => {
  fetchBills()
}

// 重置所有筛选条件并重新获取账单数据
const resetFilter = () => {
  filter.value = {
    bill_type: '',
    type: '',
    payment_status: '',
    payment_method: ''
  }
  fetchBills()
}

// 筛选条件对象
const filter = ref({
  bill_type: '', // 账单类型
  type: '', // 支付类型
  payment_status: '', // 支付状态
  payment_method: '' // 支付方式
})

// 根据支付状态返回对应的样式类名
const getStatusClass = (status) => {
  if (status === 1) return 'status-paid'
  if (status === 0) return 'status-unpaid'
  return ''
}

// 分页相关状态
const current_page = ref(1) // 当前页码
const page_size = ref(10) // 每页显示条数
const totalBills = ref(0) // 总账单数

// 获取账单列表数据
const fetchBills = async () => {
  loading.value = true
  try {
    const response = await api.get('/api/get_bills', {
      params: {
        bill_type: filter.value.bill_type || '',
        payment_status: filter.value.payment_status || null,
        type: filter.value.type || null,
        payment_method: filter.value.payment_method || '',
        current_page: current_page.value,
        page_size: page_size.value
      }
    })
    bills.value = response.data.data
    totalBills.value = response.data.total
  } catch (error) {
    showToast('获取账单失败', 'error')
  } finally {
    loading.value = false
  }
}

// 验证表单数据是否合法
const validateForm = () => {
  if (!newBill.value.bill_type.trim()) {
    showToast('请输入账单类型', 'error')
    return false
  }
  
  if (!newBill.value.amount || parseFloat(newBill.value.amount) <= 0) {
    showToast('请输入有效的金额', 'error')
    return false
  }
  
  return true
}

// 新账单表单数据对象
const newBill = ref({
  bill_type: '', // 账单类型
  amount: '', // 金额
  type: '0', // 支付类型
  payment_status: 0, // 支付状态
  payment_method: '', // 支付方式
  due_date: new Date().toISOString().split('T')[0], // 默认选今天的日期
  description: '' // 备注
})

// 预算类型选项列表
const budgetCategories = [
  { value: '房租', label: '房租' },
  { value: '交通', label: '交通' },
  { value: '伙食', label: '伙食' },
  { value: '购物', label: '购物' },
  { value: '娱乐', label: '娱乐' },
  { value: '教育', label: '教育' },
  { value: '医疗', label: '医疗' },
  { value: '其他', label: '其他' }
]

// 收入类型选项列表
const incomeCategories = [
  { value: '工资', label: '工资' },
  { value: '奖金', label: '奖金' },
  { value: '投资收益', label: '投资收益' },
  { value: '兼职收入', label: '兼职收入' },
  { value: '礼金', label: '礼金' },
  { value: '退款', label: '退款' },
  { value: '其他', label: '其他' }
]

// 账单类型相关状态
const showCustomType = ref(false) // 是否显示自定义类型输入框
const customType = ref('') // 自定义类型值

// 添加一个标记，用于区分初始加载和手动切换
const isInitialLoad = ref(true)

// 监听账单类型变化，处理自定义类型显示
watch(() => newBill.value.bill_type, (newValue) => {
  showCustomType.value = newValue === 'other'
  if (newValue !== 'other') {
    customType.value = ''
  }
})

// 监听自定义类型变化，更新账单类型
watch(() => customType.value, (newValue) => {
  if (showCustomType.value) {
    newBill.value.bill_type = newValue
  }
})

// 监听支付类型变化，重置相关状态
watch(() => newBill.value.type, (newType) => {
  // 如果是初始加载，不重置账单类型
  if (isInitialLoad.value) {
    isInitialLoad.value = false
    return
  }
  
  if (newType === '1') {
    newBill.value.payment_status = -1
    newBill.value.bill_type = ''
    showCustomType.value = false
    customType.value = ''
  }
  else {
    newBill.value.payment_status = 0
    newBill.value.bill_type = ''
    showCustomType.value = false
    customType.value = ''
  }
})

// 重置账单表单数据
const resetForm = () => {
  newBill.value = {
    bill_type: '',
    amount: '',
    type: '0',
    payment_status: 0,
    payment_method: '',
    due_date: new Date().toISOString().split('T')[0],
    description: ''
  }
  showCustomType.value = false
  customType.value = ''
  isInitialLoad.value = true
}

// 添加或编辑账单
const handleAddBill = async () => {
  if (!validateForm()) {
    return
  }

  try {
    if (isEditing.value) {
      const response = await api.put('/api/update_bill', newBill.value)
      if (response.data.code === 0) {
        showToast('更新成功', 'success')
        showAddModal.value = false
        await fetchBills()
        resetForm()
      } else {
        showToast(response.data.message, 'error')
      }
    } else {
      const response = await api.post('/api/add_bill', newBill.value)
      if (response.data.code === 0) {
        showToast('添加成功', 'success')
        showAddModal.value = false
        await fetchBills()
        resetForm()
      } else {
        showToast(response.data.message, 'error')
      }
    }
  } catch (error) {
    showToast('操作失败', 'error')
  }
}

// 点击添加账单按钮时的处理函数
const handleAddClick = () => {
  resetForm()
  isEditing.value = false
  showAddModal.value = true
}

// 编辑账单
const handleEdit = (bill) => {
  isEditing.value = true
  isInitialLoad.value = true
  newBill.value = { ...bill }
  newBill.value.bill_id = bill.bill_id
  showAddModal.value = true
}

// 删除账单
const handleDeleteBill = async (bill_id) => {
  if (confirm('确定要删除这条账单吗？')) {
    try {
      const response = await api.delete('/api/delete_bill', { data: { bill_id } })
      if (response.data.code === 0) {
        showToast('删除成功', 'success')
        await fetchBills()
      } else {
        showToast(response.data.message, 'error')
      }
    } catch (error) {
      showToast('删除失败', 'error')
    }
  }
}

// 排序配置对象
const sortConfig = ref({
  amount: '', // 金额排序：'asc' 或 'desc'
  due_date: '', // 记录日期排序
  created_date: '' // 创建时间排序
})

// 处理表格排序
const handleSort = (field) => {
  // 修改排序状态切换逻辑：第一次点击为降序
  if (!sortConfig.value[field]) {
    sortConfig.value[field] = 'desc'  // 第一次点击设为降序
  } else if (sortConfig.value[field] === 'desc') {
    sortConfig.value[field] = 'asc'   // 第二次点击设为升序
  } else {
    sortConfig.value[field] = 'desc'  // 再次点击设为降序
  }
  
  Object.keys(sortConfig.value).forEach(key => {
    if (key !== field) {
      sortConfig.value[key] = ''
    }
  }) 
  
  bills.value.sort((a, b) => {
    let aValue = a[field]
    let bValue = b[field]
    
    if (field === 'amount') {
      aValue = parseFloat(aValue)
      bValue = parseFloat(bValue)
    }
    
    if (field === 'due_date' || field === 'created_date') {
      aValue = new Date(aValue).getTime()
      bValue = new Date(bValue).getTime()
    }
    
    if (aValue === bValue) {
      return sortConfig.value[field] === 'asc' ? 1 : -1
    }
    
    return sortConfig.value[field] === 'asc' 
      ? (aValue > bValue ? 1 : -1)
      : (aValue < bValue ? 1 : -1)
  })
}

// 获取排序图标类名
const getSortIconClass = (field) => {
  if (!sortConfig.value[field]) return 'sort-icon'
  return `sort-icon ${sortConfig.value[field]}`
}

// 处理分页变化
const handlePageChange = (page) => {
  current_page.value = page
  fetchBills()
}

// 计算总页数
const totalPages = computed(() => {
  return Math.ceil(totalBills.value / page_size.value)
})

// 导出账单数据到Excel
const exportToExcel = () => {
  try {
    const exportData = bills.value.map(bill => ({
      '账单类型': bill.bill_type,
      '金额': bill.amount,
      '类型': bill.type === 1 ? '收入' : '支出',
      '支付状态': bill.type === 0 ? (bill.payment_status === 1 ? '已支付' : bill.payment_status === 0 ? '未支付' : '') : '',
      '支付方式': bill.payment_method || '',
      '记录日期': bill.due_date || '',
      '备注': bill.description || '',
      '创建时间': bill.created_date
    }))

    const wb = XLSX.utils.book_new()
    const ws = XLSX.utils.json_to_sheet(exportData)

    const colWidths = [
      { wch: 15 }, // 账单类型
      { wch: 10 }, // 金额
      { wch: 10 }, // 类型
      { wch: 10 }, // 支付状态
      { wch: 15 }, // 支付方式
      { wch: 15 }, // 记录日期
      { wch: 20 }, // 备注
      { wch: 20 }  // 创建时间
    ]
    ws['!cols'] = colWidths

    XLSX.utils.book_append_sheet(wb, ws, '个人账单')

    const fileName = `个人账单_${new Date().toLocaleDateString()}.xlsx`
    XLSX.writeFile(wb, fileName)
    
    showToast('导出成功', 'success')
  } catch (error) {
    console.error('导出失败:', error)
    showToast('导出失败', 'error')
  }
}
</script>

<template>
  <div class="bill-container">
    <Toast />
    <div class="bill-content">
      <div class="header-section">
        <h2>账单管理</h2>
      </div>

      <!-- 搜索和筛选区域 -->
      <div class="search-section">
        <div class="search-inputs">
          <div class="input-group">
            <input 
              type="text" 
              v-model="filter.bill_type" 
              placeholder="请输入账单类型"
              class="search-input"
            >
          </div>
          <div class="input-group">
            <select v-model="filter.type" class="type-select">
              <option value="">全部支付类型</option>
              <option value="0">支出</option>
              <option value="1">收入</option>
            </select>
          </div>
          <div class="input-group">
            <select v-model="filter.payment_status" class="type-select">
              <option value="">全部支付状态</option>
              <option value="0">未支付</option>
              <option value="1">已支付</option>
            </select>
          </div>
          <div class="input-group">
            <input 
              type="text" 
              v-model="filter.payment_method" 
              placeholder="请输入支付方式"
              class="search-input"
            >
          </div>
          <div class="button-group">
            <button @click="applyFilter" class="search-btn">
              <i class="fas fa-search"></i>
              查询
            </button>
            <button @click="resetFilter" class="reset-btn">
              <i class="fas fa-redo"></i>
              重置
            </button>
            <button @click="exportToExcel" class="export-btn">
              <i class="fas fa-file-excel"></i>
              导出Excel
            </button>
            <button class="add-btn" @click="handleAddClick">
              <i class="fas fa-plus"></i>
              添加账单
            </button>
          </div>
        </div>
      </div>

      <!-- 账单列表 -->
      <div class="table-container">
        <table class="bill-table" v-if="!loading && bills.length > 0">
          <thead>
            <tr>
              <th>账单类型</th>
              <th @click="handleSort('amount')" class="sortable">
                金额
                <span :class="['sort-icon', sortConfig.amount]">
                  <svg viewBox="0 0 1024 1024" width="14" height="14">
                    <path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z" fill="currentColor"/>
                  </svg>
                </span>
              </th>
              <th>支付/收款</th>
              <th>支付状态</th>
              <th>支付方式</th>
              <th @click="handleSort('due_date')" class="sortable">
                记录日期
                <span :class="['sort-icon', sortConfig.due_date]">
                  <svg viewBox="0 0 1024 1024" width="14" height="14">
                    <path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z" fill="currentColor"/>
                  </svg>
                </span>
              </th>
              <th>备注</th>
              <th @click="handleSort('created_date')" class="sortable">
                创建时间
                <span :class="['sort-icon', sortConfig.created_date]">
                  <svg viewBox="0 0 1024 1024" width="14" height="14">
                    <path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z" fill="currentColor"/>
                  </svg>
                </span>
              </th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="bill in bills" :key="bill.bill_id">
              <td>{{ bill.bill_type }}</td>
              <td class="amount" :class="bill.type === 1 ? 'income' : 'expense'">
                {{ bill.type === 1 ? '+' : '-' }}¥{{ bill.amount }}
              </td>
              <td>{{ bill.type === 1 ? '收入' : '支出' }}</td>
              <td>
                <span :class="['status-tag', getStatusClass(bill.payment_status)]">
                  {{ bill.payment_status === 1 ? '已支付' : bill.payment_status === 0 ? '未支付' : '' }}
                </span>
              </td>
              <td>{{ bill.payment_method || '' }}</td>
              <td>{{ bill.due_date || '' }}</td>
              <td>{{ bill.description || '' }}</td>
              <td>{{ bill.created_date }}</td>
              <td>
                <div class="action-buttons">
                  <button class="edit-btn" @click="handleEdit(bill)">编辑</button>
                  <button class="delete-btn" @click="handleDeleteBill(bill.bill_id)">删除</button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        
        <div v-if="loading" class="empty-state">
          <i class="fas fa-spinner fa-spin"></i>
          加载中...
        </div>
        
        <div v-if="!loading && bills.length === 0" class="empty-state">
          <i class="fas fa-inbox"></i>
          暂无账单记录
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination">
        <span class="total-records">共 {{ totalBills }} 条</span>
        <select v-model="page_size" @change="fetchBills" class="page-size-select">
          <option value="10">10条/页</option>
          <option value="20">20条/页</option>
          <option value="50">50条/页</option>
          <option value="100">100条/页</option>
        </select>
        <button @click="handlePageChange(current_page - 1)" :disabled="current_page === 1" class="page-btn">上一页</button>

        <div class="page-numbers">
          <button 
            v-for="page in totalPages" 
            :key="page" 
            @click="handlePageChange(page)" 
            :class="{'active': page === current_page}"
          >
            {{ page }}
          </button>
        </div>

        <button @click="handlePageChange(current_page + 1)" :disabled="current_page * page_size >= totalBills" class="page-btn">下一页</button>
      </div>

      <!-- 添加/编辑账单弹窗 -->
      <div v-if="showAddModal" class="modal">
        <div class="modal-content">
          <div class="modal-header">
            <h3>{{ isEditing ? '编辑账单' : '添加账单' }}</h3>
            <button class="close-btn" @click="showAddModal = false">&times;</button>
          </div>
          <div class="form-content">
            <div class="form-item">
              <label>支付/收款*</label>
              <select v-model="newBill.type">
                <option value="0">支出</option>
                <option value="1">收入</option>
              </select>
            </div>
            <div class="form-item">
              <label>账单类型*</label>
              <template v-if="newBill.type === '0' || newBill.type === 0">
                <select v-model="newBill.bill_type">
                  <option value="">请选择账单类型</option>
                  <option 
                    v-for="category in budgetCategories" 
                    :key="category.value" 
                    :value="category.value"
                  >
                    {{ category.label }}
                  </option>
                </select>
                <input 
                  v-if="showCustomType"
                  type="text" 
                  v-model="customType" 
                  placeholder="请输入其他账单类型"
                  class="custom-input"
                >
              </template>
              <template v-else-if="newBill.type === '1' || newBill.type === 1">
                <select v-model="newBill.bill_type">
                  <option value="">请选择收入类型</option>
                  <option 
                    v-for="category in incomeCategories" 
                    :key="category.value" 
                    :value="category.value"
                  >
                    {{ category.label }}
                  </option>
                </select>
                <input 
                  v-if="showCustomType"
                  type="text" 
                  v-model="customType" 
                  placeholder="请输入其他收入类型"
                  class="custom-input"
                >
              </template>
            </div>
            <div class="form-item">
              <label>金额*</label>
              <input 
                type="number" 
                v-model="newBill.amount" 
                placeholder="请输入金额"
              >
            </div>
            <div class="form-item" v-if="newBill.type == '0'">
              <label>支付状态</label>
              <select v-model="newBill.payment_status">
                <option :value="0">未支付</option>
                <option :value="1">已支付</option>
              </select>
            </div>
            <div class="form-item">
              <label>{{ newBill.type === '1' ? '收款方式' : '支付方式' }}</label>
              <input 
                type="text" 
                v-model="newBill.payment_method" 
                :placeholder="newBill.type === '1' ? '请输入收款方式' : '请输入支付方式'"
              >
            </div>
            <div class="form-item">
              <label>记录日期</label>
              <input 
                type="date" 
                v-model="newBill.due_date"
              >
            </div>
            <div class="form-item">
              <label>备注</label>
              <textarea 
                v-model="newBill.description" 
                placeholder="请输入备注信息"
              ></textarea>
            </div>
          </div>
          <div class="modal-footer">
            <button class="cancel-btn" @click="showAddModal = false">取消</button>
            <button class="confirm-btn" @click="handleAddBill">确定</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.bill-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: calc(100vh - 40px);
}

.bill-content {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.header-section h2 {
  font-size: 20px;
  color: #303133;
  margin: 0;
}

.add-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #67c23a;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.add-btn:hover {
  background: #85ce61;
  transform: translateY(-2px);
}

.search-section {
  background: #f5f7fa;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
}

.search-inputs {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.input-group {
  flex: 1;
  min-width: 200px;
}

.search-input,
.type-select {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  font-size: 14px;
  color: #606266;
  transition: all 0.3s;
}

.search-input:focus,
.type-select:focus {
  border-color: #409eff;
  outline: none;
}

.button-group {
  display: flex;
  gap: 12px;
  margin-left: auto;
}

.search-btn,
.reset-btn,
.export-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.search-btn {
  background: #409eff;
  color: white;
}

.search-btn:hover {
  background: #66b1ff;
}

.reset-btn {
  background: #f4f4f5;
  color: #606266;
}

.reset-btn:hover {
  background: #e9e9eb;
}

.export-btn {
  background: #67c23a;
  color: white;
}

.export-btn:hover {
  background: #85ce61;
}

.table-container {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;
}

.bill-table {
  width: 100%;
  border-collapse: collapse;
}

.bill-table th,
.bill-table td {
  padding: 16px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
  font-size: 14px;
  color: #606266;
}

.bill-table th {
  background: #f5f7fa;
  color: #606266;
  font-weight: 500;
}

.bill-table tbody tr:hover {
  background: #f5f7fa;
}

.amount {
  font-weight: 500;
}

.amount.income {
  color: #67c23a;
}

.amount.expense {
  color: #f56c6c;
}

.status-tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status-paid {
  background: #f0f9eb;
  color: #67c23a;
}

.status-unpaid {
  background: #fef0f0;
  color: #f56c6c;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.edit-btn,
.delete-btn {
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.edit-btn {
  background: #409eff;
  color: white;
}

.edit-btn:hover {
  background: #66b1ff;
}

.delete-btn {
  background: #f56c6c;
  color: white;
}

.delete-btn:hover {
  background: #f78989;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: #909399;
  font-size: 14px;
  gap: 12px;
}

.empty-state i {
  font-size: 24px;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.total-records {
  color: #606266;
  font-size: 14px;
}

.page-size-select {
  height: 32px;
  padding: 0 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  color: #606266;
}

.page-btn {
  padding: 6px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background: white;
  color: #606266;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.page-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.page-btn:not(:disabled):hover {
  border-color: #409eff;
  color: #409eff;
}

.page-numbers {
  display: flex;
  gap: 4px;
}

.page-numbers button {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background: white;
  color: #606266;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.page-numbers button:hover {
  border-color: #409eff;
  color: #409eff;
}

.page-numbers button.active {
  background: #409eff;
  color: white;
  border-color: #409eff;
}

.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
}

.sortable:hover {
  background-color: #ebeef5;
}

.sort-icon {
  display: inline-flex;
  align-items: center;
  color: #c0c4cc;
  margin-left: 4px;
}

.desc {
  color: #409eff;
  transform: rotate(180deg);
}

.asc {
  color: #409eff;
  transform: rotate(0deg);
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 4px;
  width: 500px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.modal-header {
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  font-size: 16px;
  color: #333;
  margin: 0;
}

.close-btn {
  border: none;
  background: none;
  font-size: 20px;
  color: #909399;
  cursor: pointer;
}

.form-content {
  padding: 20px;
}

.form-item {
  position: relative;
  margin-bottom: 15px;
}

.form-item label {
  display: block;
  margin-bottom: 8px;
  color: #606266;
  font-size: 14px;
}

.form-item input,
.form-item select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
}

.modal-footer {
  padding: 15px 20px;
  border-top: 1px solid #ebeef5;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.cancel-btn,
.confirm-btn {
  padding: 8px 20px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.cancel-btn {
  border: 1px solid #dcdfe6;
  background: white;
  color: #606266;
}

.confirm-btn {
  background: #409eff;
  color: white;
  border: none;
}

.custom-input {
  margin-top: 8px;
}
</style>
